<template>
    <div class="shopcart">
        <div class="content" @click="toggleList">
            <div class="content-left">
                <div class="logo-wrapper">
                    <div class="logo " :class="totalCount>0?'hightlight':''">
                        <i class="icon-shopping_cart" :class="totalCount>0?'hightlight':''"></i>
                    </div>
                    <div class="num" v-show="totalCount>0" id="badge">{{totalCount}}</div>
                </div>
                <div class="price" :class="totalCount>0?'hightlight':''">￥{{totalPrice}}</div>
                <div class="desc" >另需配送费{{deliveryPrice}}元</div>
            </div>
            <div class="content-right">
                <div class="pay " :class="payClass" @click.stop.prevent="pay">{{payDesc}}</div>
            </div>
        </div>
        <div class="shopcart-list" v-show="!fold">
            <div class="list-header">
                <h1 class="title">购物车</h1>
                <span class="empty" @click="empty">清空</span>
            </div>
            <div class="list-content" ref="listContent">
                <ul>
                    <li class="food" v-for="(food,i) in selectFoods" :key="i">
                        <span class="name">{{food.name}}</span>
                        <div class="price">
                            <span>￥{{food.price*food.count}}</span>
                        </div>
                        <div class="control-wrapper">
                            <cartcontrol :food="food"></cartcontrol>
                        </div>
                        
                    </li>
                </ul>
            </div>
        </div>
        <div class="list-mask" v-show="!fold"  @click="toggleList"></div>
    </div>
</template>
<script>
import BScroll from 'better-scroll'
import cartcontrol from '../cartcontrol/cartcontrol'
export default {
    props:['deliveryPrice','minPrice','selectFoods'],
    data() {
        return {
            fold: true,//收起为true，展开为false
            //ballFlag: false
        }
    },
    components:{
        cartcontrol
    },
    computed: {
        totalPrice() {
            let total = 0
            this.selectFoods.forEach((food)=>{
                total+=food.price*food.count
            })
            return total
        },
        totalCount(){
            let count = 0
            this.selectFoods.forEach((food)=>{
                count += food.count
            })
            return count
        },
        payDesc(){
            if(this.totalPrice===0){
                return `￥${this.minPrice}元起送`
            }else if(this.totalPrice<this.minPrice){
                let money = this.minPrice-this.totalPrice
                return `还差￥${money}元`
            }else{
                return '去结算'
            }
        },
        payClass(){
            if(this.totalPrice<this.minPrice){
                return 'not-enough'
            }else{
                return 'enough'
            }
        },
        listShow() {
            if(!this.totalCount){
                this.fold = true
                return false
            }
            let show = !this.fold
            return show
        }
    },
    methods: {
        toggleList(){
            if(!this.totalCount){
                return 
            }
            this.fold = !this.fold
        },
        empty(){
            this.selectFoods.forEach((food)=>{
                food.count=0
            })
            this.fold = !this.fold
        },
        pay(){
            if(this.totalPrice<this.minPrice){
                return 
            }
            alert(`支付${this.totalPrice}元`)
        },
    },
    mounted (){
        this.$nextTick(()=>{
            if(!this.scroll){
                this.scroll = new BScroll(this.$refs.listContent,{
                    click: true
                })
            }else{
                this.scroll.refresh()
            }
        })
    }
}
</script>
<style lang="stylus" scoped>
@import '../../common/stylus/base.styl'
@import '../../common/stylus/mixin.styl'
@import '../../common/fonts/icon.css'
.shopcart
    position fixed
    width 100%
    height 48px
    bottom 0
    left 0
    z-index 50
    .content
        display flex
        background #141d27
        .content-left
            flex 1
            font-size 0
            .logo-wrapper
                display inline-block
                position relative
                top -10px
                margin 0 12px
                padding 6px
                width 56px
                height 56px
                box-sizing border-box
                vertical-align top
                border-radius 50%
                background #141d27
                .logo
                    width 100%
                    height 100%
                    border-radius 50%
                    background #2b343c
                    text-align center
                    &.hightlight
                        background rgb(0,160,220)
                    .icon-shopping_cart
                        font-size 24px
                        line-height 44px
                        color #80858a
                        &.hightlight
                            color #fff
                .num
                    position absolute
                    top 0px
                    right 0px
                    width 24px 
                    height 16px
                    line-height 16px
                    text-align center
                    border-radius 16px
                    font-size 9px
                    background rgb(240,20,20)
                    color #fff
                    box-shadow 0 4px 8px 0 rgba(0,0,0,0.4)
            .price
                display inline-block
                vertical-align top
                line-height 24px
                margin-top  12px
                padding-right 12px
                box-sizing border-box
                border-right 1px solid rgba(255,255,255,0.1)
                font-size 16px
                font-weight 700
                color rgba(255,255,255,0.4)
                &.hightlight
                    color #fff
            .desc
                display inline-block
                font-size 10px
                color rgba(255,255,255,0.4)
                line-height 24px
                margin-top 12px
                margin-left 12px
        .content-right
            flex-basis 105px
            width 105px
            .pay
                height 48px
                line-height 48px
                background #2b343c
                font-size 12px
                color rgba(255,255,255,0.4)
                font-weight 700
                text-align center
                &.not-enough
                    background #2b343c
                &.enough
                    background #00b34c
                    color #fff
    .shopcart-list
        width 100%
        background #fff
        position absolute
        bottom 47px
        z-index -1
        .list-header
            height 40px
            line-height 40px
            padding 0 18px 
            background #f3f5f7
            position relative
            border-bottom 1px solid rgba(7,17,27,0.1)
            .title
                float left
                font-size 14px
                font-weight 200
                color rgb(7,17,27)
            .empty
                float right
                //padding-right 24px
                font-size 12px
                color rgb(0,160,220)
                
        .list-content
            //width 100%
            padding 0 18px
            max-height 217px
            backgroud #fff
            overflow hidden
            .food
                box-sizing border-box
                height 48px
                padding 0 18px
                border-bottom 1px solid rgba(7,17,27,0.1)
                position relative
                .name
                    line-height 48px
                    font-size 14px
                    color rgb(7,17,27)
                .price
                    position absolute
                    bottom 12px
                    right 90px
                    font-size 10px
                    color rgb(240,20,20)
                    font-weight 700
                    line-height 24px
                .control-wrapper
                    position absolute
                    right 0
                    bottom 6px

    .list-mask
        position fixed
        top 0
        left 0
        background rgba(7,17,27,0.6)
        width 100%
        height 100%
        backdrop-filter blur(25px)
        z-index -2

</style>

